<template>
  <div>
    <Card>
			<!-- 修改面板 -->
			<Modal  v-model="edit"  title="修改菜单"  @on-ok="ok">
				<div class="form-div" v-show="eidtUrlShow == true">
          <label class="myLabel">菜单地址</label>
					<Select v-model="eidtUrl" style="width:200px" @on-change="creatName">
						<Option v-for="(index, item) in urlList" :value="index" :key="item">{{ index}}</Option>
					</Select>
				</div>
				<div class="form-div" v-show="eidtUrlShow == true">
					<label class="myLabel">菜单名称</label>
          <Input v-model="eidtName" placeholder="请输入新名称" style="width: 200px" disabled="disabled"/>
				</div>
				<div class="form-div">
					<label class="myLabel">菜单标题</label>
					<Input v-model="eidtTitle" placeholder="请输入菜单的名称" style="width: 200px" />
				</div>
				<div class="form-div" v-show="eidtMetaShow == true">
					<label class="myLabel">菜单图标</label>
					<Select v-model="eidtMeta" style="width:200px">
						<Option v-for="(index, item) in metaList" :value="index" :key="item">{{ index}}</Option>
					</Select>
				</div>
      </Modal>
			<!-- 新建面板 -->
			<Modal v-model="newMenu"	title="创建新菜单"	@on-ok="creat">
				<div class="form-div">
					<label class="myLabel">菜单地址</label>
					<Select v-model="newtUrl" style="width:200px" @on-change="name">
						<Option v-for="(index, item) in urlList" :value="index" :key="item">{{ index}}</Option>
					</Select>
					<div class="tip">
						<span class="start">*</span>
						注：如果主菜单本身不具备任何跳转功能不需要选择地址
					</div>
				</div>
				<div class="form-div">
					<label class="myLabel">
						是否为父级菜单
					</label>
					<Select v-model="mainMenu" style="width:200px" @on-change="isParent">
						<Option value="1">是</Option>
						<Option value="0">否</Option>
					</Select>
				</div>
				<div class="form-div" v-show="mainMenu != 1">
					<label class="myLabel">所属父级菜单名称</label>
					<Select v-model="parent"  style="width:200px">
							<Option v-for="item in parentList" :value="item.id" :key="item.id">{{ item.title }}</Option>
					</Select>
				</div>
				<div class="form-div">
					<label class="myLabel">菜单标题</label>
					<Input v-model="newTitle" placeholder="请输入菜单的名称" style="width: 200px" />
				</div>
				<div class="form-div">
					<label class="myLabel">菜单名称</label>
					<Input v-model="newName" placeholder="该项自动配置" style="width: 200px" disabled="disabled"/>
				</div>
				<div class="form-div" v-show="mainMenu == 1">
					<label class="myLabel">菜单图标</label>
					<Select v-model="newMeta" style="width:200px">
						<Option v-for="(index, item) in metaList" :value="index" :key="item">{{ index}}</Option>
					</Select>
				</div>
				<div class="form-div">
					<label class="myLabel">
						所属菜单类型
					</label>
					<Select v-model="menuType" style="width:200px" disabled="disabled">
						<Option value="1">后台页面菜单</Option>
					</Select>
				</div>
			</Modal>
			<!-- 排序面板 -->
			<Modal v-model="sortMenu" title="菜单排序" :footer-hide='isHide' class="sortMenu">
				<div class="sort-box">
					<Split v-model="split1">
						<div slot="left" class="menu-split-pane">
							<div class="sort-title">
								父菜单排序
							</div>
							<ul class="sort-ul">
								<draggable class="dragCon" v-model="sortParentList" :options="parentOptions">
									<li v-for="item in sortParentList" :key="item.mid" @click="getChildMenus(item.mid)" v-bind:class="{selected:item.mid==selected}" >
										{{item.title}}
									</li>
								</draggable>
							</ul>
							<Button class="sort-btn" type="primary" @click="sortParent">保存</Button>
						</div>
						<div slot="right" class="menu-split-pane">
							<div class="sort-title">
								子菜单排序
							</div>
							<ul class="sort-ul">
								<draggable class="dragCon" v-model="childList" :options="childOptions">
									<li v-for="item in childList" :key="item.mid">
										{{item.title}}
									</li>
								</draggable>
							</ul>
							<Button class="sort-btn" type="primary" @click="sortchild" v-show="childList.length > 0">保存</Button>
						</div>
					</Split>
				</div>
			</Modal>
			<!-- 删除面板 -->
			<Modal  v-model="delModal"  title="删除菜单"  @on-ok="delMenu">
				是否删除该菜单？
			</Modal>
			<div class="form-div">
				<!-- 新建按钮 -->
				<Button style="margin: 10px 0;"  type="primary" @click="newMenu = true">创建新菜单</Button>
				<!-- 排序按钮 -->
				<Button style="margin: 10px 0;"  type="primary" @click="sortMenu = true">菜单排序</Button>
			</div>
			<Table :columns="columns" :data="tableData"></Table>
			<div class="center">
				<div class="pageBox">
					<Page :total="count" show-total :page-size ="pageSize" @on-change="handlePage"/>
				</div>
			</div>
    </Card>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {appRouter} from '@/router/router'
export default {
  data () {
    return {
      columns: [
        {
					title: '序号',
					type: 'index'
				},
        {
					title: '菜单命名',
					key: 'title'
				},
				{
					title: '菜单地址',
					key: 'menuUrl',
					render: (h, params) => {
						if (params.row.menuUrl === '' || params.row.menuUrl === null || params.row.menuUrl === undefined) {
							return h('span', ' 无')
						} else {
							return h('span', params.row.menuUrl)
						}
					}
				},
				{
					title: '是否为父级菜单',
					key: 'isMain',
					render: (h, params) => {
						if (params.row.isMain === 1) {
							return h('span', ' 是')
						}
						if (params.row.isMain === 0) {
							return h('span', ' 否 ')
						}
					}
				},
				{
					title: '父级菜单编号',
					key: 'mainId',
					sortable: true
				},
				{
					title: '是否可用',
					key: 'disabled',
					render: (h, params) => {
						if (params.row.disabled === 1) {
							return h('span', ' 是')
						}
						if (params.row.disabled === 0) {
							return h('span', ' 否 ')
						}
					}
				},
				{
          title: '操作',
          key: 'handle',
          render: (h, params) => {
						return h('div', [
							h('Button', {
									props: {
											type: 'primary',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.edit = true
												// 判断地址是否为空
												if (params.row.menuUrl === '' || params.row.menuUrl === null || params.row.menuUrl === undefined) {
													this.eidtUrlShow = false
													this.eidtUrl = ''
													this.eidtMeta = ''
												} else {
													this.eidtUrlShow = true
													this.eidtUrl = params.row.menuUrl
													this.eidtName = this.tableData[params.index].menuName
												}
												// 判断是否为主菜单
												if (this.tableData[params.index].isMain === 1) {
													this.eidtMetaShow = true
													this.eidtMeta = this.tableData[params.index].meta
												} else {
													this.eidtMetaShow = false
													this.eidtMeta = ''
												}
												this.eidtId = params.row.mid
												this.eidtMenuType = this.tableData[params.index].menuType
												this.eidtIsMain = this.tableData[params.index].isMain
												this.eidtMainId = this.tableData[params.index].mainId
												this.eidtTitle = params.row.title
												this.eidtSort = this.tableData[params.index].seq
											}
									}
							}, '修改'),
							h('Button', {
									props: {
											type: 'error',
											size: 'small'
									},
									style: {
											marginRight: '5px'
									},
									on: {
											click: () => {
												this.delModal = true
												this.delId = params.row.mid
											}
									}
							}, '删除')
						])
					}
        }
      ],
      tableData: [],
			edit: false,
			count: 0,
			pageSize: 10,
			page: 1,
			eidtId: 0,
			eidtUrl: '',
			eidtUrlShow: false,
			eidtName: '',
			eidtTitle: '',
			eidtMeta: '',
			eidtMetaShow: false,
			eidtMenuType: '',
			eidtIsMain: '',
			eidtMainId: '',
			eidtSort: '',
			newMenu: false,
			newtUrl: '',
			mainMenu: '',
			parent: '',
			parentList: [],
			newTitle: '',
			newName: '',
			menuType: '1',
			menuData: [],
			routerList: [],
			urlList: [],
			newMeta: '',
			metaList: ['home', 'application', 'list', 'control', 'list_reply', 'reply', 'server', 'resources', 'AlarmSetting'],
			sortMenu: false,
			split1: 0.5,
			parentOptions: {},
			childOptions: {},
			childList: [],
			selected: 0,
			isHide: true,
			parentIdList: [],
			parentOrderList: [],
			childIdList: [],
			childOrderList: [],
			sortParentList: [],
			delModal: false,
			delId: 0
    }
  },
  methods: {
		ok () {
			// 修改
			this.$api.put(0, '/usr/v2/menu', {
				mId: this.eidtId,
				menuUrl: this.eidtUrl,
				menuType: this.eidtMenuType,
				parentId: this.parent,
				isMain: this.eidtIsMain,
				menuName: this.eidtName,
				title: this.eidtTitle,
				meta: this.eidtMeta,
				mainId: this.eidtMainId,
				disabled: 1,
				sort: this.eidtSort
				}, r => {
				if (r.data.code === 0) {
					this.$Message.success('修改成功')
					this.getList()
				}
			})
		},
		// 分页跳转
		handlePage (value) {
			this.page = value
			this.getList()
		},
		// 新增菜单
		creat () {
			if (this.menuData.indexOf(this.newName) === -1) {
				this.$api.post(0, '/usr/v2/menu', {
					menuUrl: this.newtUrl,
					menuType: this.menuType,
					parentId: this.parent,
					isMain: this.mainMenu,
					menuName: this.newName,
					title: this.newTitle,
					meta: this.newMeta,
					mainId: this.parent,
					disabled: 1,
					seq: this.count
					}, r => {
					if (r.data.code === 0) {
						this.$Message.success('创建成功')
						this.getList()
						this.newtUrl = ''
						this.parent = ''
						this.mainMenu = ''
						this.newTitle = ''
						this.newName = ''
						this.newMeta = ''
					}
				})
			} else {
				this.$Message.error('该菜单已经存在')
			}
		},
		// 生成菜单name
		name (path) {
			this.newName = path.replace('/', '')
		},
		// 修改菜单地址生成菜单name
		creatName (path) {
			if (path === '' || path === null || path === undefined) {
				this.eidtName = ''
			} else {
				this.eidtName = path.replace('/', '')
			}
		},
		// 主菜单列表生成
		isParent (parent) {
			if (parseInt(parent) === 0) {
				this.$api.get(0, '/usr/v2/menu/list?isMain=1', {}, r => {
					this.parentList = r.data.data
				})
			}
		},
		getList () {
			// 获取所有菜单数据
			this.$api.get(0, '/usr/v2/menu/page?page=' + this.page + '&limit=' + this.pageSize, {}, r => {
				this.tableData = r.data.data.data
				this.count = r.data.data.total
			})
		},
		getChildMenus (id) {
			this.childList = []
			this.selected = id
			this.$api.get(0, '/usr/v2/menu/list?mainId=' + id, {}, r => {
				this.childList = r.data.data
			})
		},
		// 父菜单排序
		sortParent () {
			this.parentIdList = []
			this.parentOrderList = []
			for (var i = 0; i < this.sortParentList.length; i++) {
				this.parentIdList.push(parseInt(this.sortParentList[i].mid))
				this.parentOrderList.push(i + 1)
			}
			this.$api.put(0, '/usr/v2/menu/list/sort', {mIds: this.parentIdList.join(), seqs: this.parentOrderList.join()}, r => {
				if (r.data.code === 0) {
					this.$Message.success('保存成功')
					this.getList()
				} else {
					this.$Message.error('保存失败')
				}
			})
		},
		// 子菜单排序
		sortchild () {
			this.childIdList = []
			this.childOrderList = []
			for (var i = 0; i < this.childList.length; i++) {
				this.childIdList.push(parseInt(this.childList[i].mid))
				this.childOrderList.push(i + 1)
			}
			this.$api.put(0, '/usr/v2/menu/list/sort', {mIds: this.childIdList.join(), seqs: this.childOrderList.join()}, r => {
				if (r.data.code === 0) {
					this.$Message.success('保存成功')
					this.getList()
				} else {
					this.$Message.error('保存失败')
				}
			})
		},
		// 删除菜单
		delMenu () {
			this.$api.delete(0, '/usr/v2/menu?id=' + this.delId, {}, r => {
				console.log(r.data)
				if (r.data.code === 0) {
					this.$Message.success('删除成功')
					this.getList()
				} else {
					this.$Message.error('删除失败')
				}
			})
		}
  },
  mounted () {
		this.getList()
		this.$api.get(0, '/usr/v2/menu/tree', {}, r => {
			this.sortParentList = r.data.data
			// 将所有菜单数据加入查重数组中
			for (var i = 0; i < r.data.data.length; i++) {
				this.menuData.push(r.data.data.menu_name)
			}
		})
		// 获取路由地址
		this.routerList = appRouter
		for (var i = 0; i < this.routerList.length; i++) {
			if (this.routerList[i].children !== undefined) {
				// 获取菜单地址
				for (var a = 0; a < this.routerList[i].children.length; a++) {
					this.urlList.push(this.routerList[i].children[a].path)
				}
			}
		}
  },
	// 注册拖拽插件
	components: {
		draggable
	}
}
</script>

<style>
  ul.ivu-page{
		margin-top:20px
	}
	div.form-div{
		margin-bottom:15px;
	}
	label.myLabel{
		display:inline-block;
		width:115px;
		text-align: right;
		margin-right:15px
	}
	div.tip{
		color:#aaa;
		margin:10px 0 0 50px
	}
	span.start{
		color:#E13682
	}
	.menu-split-pane{
		padding:10px;
		position: relative;
		height:100%
	}
	.sort-box div:after{
		content: "";
		display: block;
		clear: both;
	}
	.sort-box{
		height:500px;
	}
	.sort-title{
		border-bottom:1px solid #ddd;
		font-size: 16px;
		padding-bottom:10px;
		padding-left:10px
	}
	.sort-ul{
		height:400px;
		overflow: auto;
	}
	.sort-ul li{
		list-style: none;
		padding:10px;
		cursor: pointer;
	}
	.sort-ul li.selected{
		color:#CB2D5D
	}
	.sort-btn{
		position: absolute;
		bottom:0;
		right:20px
	}
</style>
